<template>
  <div class="pointsCar">
    <div class="car_main">
      <div class="car_main" v-show="this.allGoods.length!=0">
        <div class="car_item" v-for="(v,i) in this.allGoods" :key="i">
          <div class="item_left" @click="toSelect(v,i)">
            <img class="xuan" src="../../assets/image/xuan.png" alt v-show="!v.normalFlag" />
            <img class="xuan" src="../../assets/image/checkbox-click.png" alt v-show="v.normalFlag" />
          </div>
          <div class="Img">
            <img class="images" :src="v.picture" alt />
          </div>
          <div class="item_right">
            <div class="reght">
                <span class="right_title">{{v.name}}</span>
                <img @click='delSingleGiftCar(v,i)' src="../../assets/image/delete.png" alt="">
            </div>
            <div class="right_bottom">
              <span class="bottom_left">
                <img src="../../assets/image/car.png" alt />
                {{v.point*v.quantity}}
              </span>
              <div class="bottom_reg">
                <i @click="sub(v)">-</i>
                <input type="text" v-model="v.quantity" @blur="showNum(v)" />
                <i @click="add(v)">+</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="car_go">
        <div class="car_goods">
          <div class="car_goods_left" @click="checkAll()">
            <img class="xuan" src="../../assets/image/xuan.png" alt v-show="!isCheck" />
            <img class="xuan" src="../../assets/image/checkbox-click.png" alt v-show="isCheck" />
            全选
          </div>
          <div class="car_jf">
            <p>积分合计:{{getTotalPrice}}</p>
          </div>
          <div class="car_ti" @click="payOrder()">提交订单</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Decimal } from "decimal.js"; //引入decimal
//引入保存所有接口的url文件
import url from "../../axios/apiUrl";
//引入api.js定义的方法index
import { postRequest } from "../../api/index";
import { getRequest } from "../../api/indexGet";
export default {
  data() {
    return {
      isCheck: false, //是否选中
      allGoods: [], //所有商品
      checkTotalNum: 0, //选中的商品数量
      checkGoods: [], //选中的商品数组
    };
  },
  created() {
    getRequest(url.giftCar + "/0").then((res) => {
      this.allGoods = res.data.content;
      if (this.allGoods.length != 0) {
        this.allGoods.forEach((item) => {
          this.$set(item, "normalFlag", false);
        });
      }
    });
  },
  methods: {
    // 控制全选
    allFlag() {
      var newArr = this.checkGoods;
      if (newArr.length == this.allGoods.length) {
        this.isCheck = true;
      } else {
        this.isCheck = false;
      }
    },
    // 全选
    checkAll() {
      this.isCheck = !this.isCheck;
      if (!this.isCheck) {
        this.checkGoods = [];
        this.allGoods.map((obj, index) => {
          this.allGoods[index].normalFlag = false;
        });
      } else {
        // 深拷贝  解除双向绑定
        this.checkGoods = JSON.parse(JSON.stringify(this.allGoods));
        this.allGoods.map((obj, index) => {
          this.allGoods[index].normalFlag = true;
        });
      }
    },
    // 单个选中
    toSelect(v, i) {
      this.allGoods[i].normalFlag = !this.allGoods[i].normalFlag;
      if (this.allGoods[i].normalFlag) {
        this.checkGoods.push(v);
      } else {
        if (this.checkGoods.length != 0) {
          this.checkGoods.map((obj, index) => {
            if (v.goodsId == obj.goodsId) {
              this.checkGoods.splice(index, 1);
            }
          });
        }
      }
      // 调用控制全选
      this.allFlag();
    },
    // 加
    add(v) {
      if (v.quantity < v.stock) {
        v.quantity = parseInt(v.quantity) + 1;
      } else {
        v.quantity = v.stock;
        this.$notify({
          message: "商品数量不能再增加了",
          type: "error",
          duration: 3000,
          showClose: true,
          offset: 400,
        });
      }
      this.changeNum(v);
    },
    // 减
    sub(v) {
      if (v.quantity > 1) {
        v.quantity = parseInt(v.quantity) - 1;
      } else {
        v.quantity = 1;
      }
      this.changeNum(v);
    },
    // 失
    showNum(v) {
      if (v.quantity >= v.stock) {
        v.quantity = parseInt(v.stock);
      } else if (v.quantity < 1) {
        v.quantity = parseInt(1);
      }
      this.changeNum(v);
    },
    // 请求修改礼品车商品数量接口
    // changeNum:utils.debounce(function(v){
    //   postRequest(url.changeGiftCarNum,{
    //     goodsId:v.goodsId,
    //     quantity:v.quantity,
    //     type:0
    //   }).then(res=>{
    //     console.log(res.data)
    //   })
    // },1000),

    // 删除单个礼品车商品
    delSingleGiftCar(v,i){
      postRequest(url.delGiftCar,{
        type:0,
        ids:[v.goodsId]
      }).then(res=>{
        if(res.data.content){
          this.allGoods.splice(i,1)
        }
      })
    },
//  ti交
    payOrder() {
      if (this.checkGoods.length != 0) {
        getRequest(url.userPoint).then((res) => {
          console.log(res, "res");
          if (res.data.content >= this.getTotalPrice) {
            var list = [];
            this.checkGoods.map((obj) => {
              list.push({ goodsId: obj.goodsId, quantity: obj.quantity });
            });
            var result = {
              type: 0,
              params: list,
            };
            sessionStorage.setItem("ponitOrder", JSON.stringify(result));
            this.$router.push("/writeOrder");
          } else {
            this.$notify({
              type: "warning",
              message: "积分不足",          
            });
          }
        });
      }
    },
  },
  computed: {
    // 计算积分
    getTotalPrice() {
      var newArr = this.checkGoods;
      let total = 0;
      for (let goods of newArr) {
        total = new Decimal(goods.quantity)
          .mul(new Decimal(goods.point))
          .add(new Decimal(total));
      }
      return total;
    },
  },
};
</script>
<style lang="less" scoped>
.pointsCar {
  padding: 0;
  margin: 0;
  background: #eeeeee;
  .car_main {
    background: #ffffff;
    // height: 3.64rem;
    .car_item {
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      height: 3.64rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 0.2rem solid #eeeeee;
      // align-items: center;
      .item_left {
        display: flex;
        align-items: center;
        .xuan {
          width: 0.65rem;
          height: 0.65rem;
          border-radius: 0.65rem;
        }
        .images {
          width: 2.3rem;
          height: 2.3rem;
          padding-left: 0.26rem;
        }
      }
      .item_right {
        width: 5.6rem;
        display: grid;
        align-items: center;
        // padding-left: 0.22rem;
        .reght{
          display: flex;
          justify-content: space-around;
          align-items: center;

          .right_title {
            width: 4.5rem;
          color: #222222;
          font-size: 0.36rem;
          font-weight: bold;
          line-height: 0.46rem;
        }
        img{
          width: 46px;
          height: 46px;
        }
        }
        .right_bottom {
          display: flex;
          justify-content: space-between;
          margin-left: 0.2rem;
          margin-right: 0.2rem;
          .bottom_left {
            // padding-left: 0.2rem;
            img {
              padding-right: 0.2rem;
            }
          }
          .bottom_reg {
            i{
              font-size: 0.48rem;
            }
            input {
              width: 1.5rem;
              height: 0.66rem;
              background: #f5f5f5;
              border: 0;
              outline: none;
              text-align: center;
            }
          }
        }
      }
      .Img {
        width: 2.3rem;
        height: 3.64rem;
        // padding-left: 0.26rem;
        img {
          width: 2.3rem;
          height: 2.3rem;
          margin-top: 0.42rem;
        }
      }
    }
  }
  .car_go {
    width: 100%;
    height: 1.44rem;
    // line-height: 1.44rem;
    background: #ffffff;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9999;
    .car_goods {
      display: flex;
      justify-content: space-between;
      .car_goods_left {
        padding-left: 0.2rem;
        font-size: 0.38rem;
        color: #343434;
        line-height: 1.44rem;
        img {
          width: 0.65rem;
          height: 0.65rem;
          border-radius: 0.65rem;
          padding-right: 0.2rem;
          margin-bottom: -0.2rem;
        }
      }
      .car_jf {
        display: grid;
        height: 1.44rem;
        align-items: center;
        text-align: right;
        p {
          color: #fe343c;
          font-size: 0.4rem;
          font-weight: bold;
        }
        span {
          color: #fe343c;
          font-weight: 400;
          font-size: 0.38rem;
        }
      }
      .car_ti {
        width: 3.46rem;
        height: 1.44rem;
        background: #1eb808;
        text-align: center;
        align-items: center;
        color: #ffffff;
        font-size: 0.4rem;
        line-height: 1.44rem;
      }
    }
  }
}
</style>